<template>
	<div class="create-random">
		<el-input type="password" v-model="returnValue" clearable show-password :placeholder="placeholder">
			<el-button style="padding-right: 10px" slot="suffix" type="text" @click="openDialog">随机密码</el-button>
		</el-input>
		<el-dialog :visible.sync="visible" title="生成随机密码" append-to-body modal-append-to-body :close-on-click-modal="false">
			<random-pwd @click="getPwd" ref="random"></random-pwd>
		</el-dialog>
	</div>
</template>

<script>
import randomPwd from "@/components/random/index"

export default {
	name: "create-random",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [String, Number],
			default: "",
		},
		placeholder: {
			type: String,
			default: "请输入密码",
		},
	},
	data() {
		return {
			visible: false,
		}
	},
	computed: {
		returnValue: {
			get() {
				return this.value
			},
			set(value) {
				this.$emit("update:value", value)
			},
		},
	},
	methods: {
		openDialog() {
			this.visible = true
			this.$nextTick(() => {
				this.$refs.random.init()
			})
		},
		getPwd(value) {
			this.returnValue = value
			this.visible = false
			this.$emit("change", value)
		},
	},
	components: {
		randomPwd,
	},
}
</script>

<style lang="scss" scoped>
.create-random {
	display: inline-block;
	width: 100%;
}
</style>
